<template>
  <div>
    <div class="bottom-space" ref="component">
      <div :key="index" v-for="(item, index) in field.fieldValue">
        <div class="el-icon-paperclip line"></div>
        <div class="line"
             style="font-family: PingFangSC-Regular,sans-serif;font-size: 14px;color: #000000;letter-spacing: 0;">
          {{item.name}}
        </div>
        <div class="line el-icon-delete icon-button" @click="handleDelete(index)"></div>
      </div>
    </div>
    <el-upload
      :on-error="handleUploadError"
      :on-success="handleUploadSuccess"
      :show-file-list=false
      :multiple="true"
      :action="'/pmph/action/file/upload?uploadPath=' + uploadPath">
      <el-button size="small" style="width: 180px;" type="primary">上传附件</el-button>
    </el-upload>
  </div>
</template>
<script>
  export default {
    name: 'KFileField',
    props: {
      field: {},
      fieldIndex: '',
      uploadPath: {
        type: String,
        default: ''
      },
    },
    data() {
      return {
        coverStyle: []
      }
    },
    methods: {
      handleUploadError(err, file, fileList) {
        this.$message.error("文件上传失败")
      },
      handleUploadSuccess(response) {
        this.$emit("upload", this.fieldIndex, response.storedPath, response.originName);
      },
      handleDelete(index) {
        this.$emit('del', this.fieldIndex, index)
      },
    },
  }
</script>
<style scoped>

  .line {
    display: inline-block;
  }

  .bottom-space {
    margin-bottom: 10px;
  }

  .icon-button {
    cursor: pointer;
  }

  .img-preview-block img {
    max-width: 600px;
    max-height: 600px;
  }

</style>
